<template>
	<view class="mt-2">
		<uv-steps current="1" direction="column" dot>
			<uv-steps-item v-for="(item,index) in flowAdmins" :key="index">
				<template v-slot:title>
					<text>第{{item.relation}}级,
					  <text v-if="item.type==2">1人或签</text>
					  <text v-else-if="item.type==3">{{item.userRespVOList.length}}人会签</text> 
					</text>
					 <text v-if="item.status >= 0">
					    (<text v-if="item.status == 0" >待审核</text><text v-if="item.status == 1" >审核通过</text><text v-if="item.status == 2" >审核拒绝</text><text v-if="item.status == 5" >审核中</text>)
					</text>
				</template>
				<template v-slot:desc>
					<view class="flex flex-wrap">
						<view class="mr-2 flex flex-column align-center" v-for="(user,index2) in item.userRespVOList" :key="index2">
							<view><uv-avatar :src="user.avatar"></uv-avatar></view>
							<view class="flex">
								<uv-icon v-if="user.flowCheckStatus == 1" color="#5ac725" name="checkmark-circle-fill"></uv-icon>
								<uv-icon v-if="user.flowCheckStatus == 2" color="#f56c6c" name="close-circle-fill"></uv-icon>
								<uv-icon v-if="user.flowCheckStatus == 0" color="#909399" name="clock-fill"></uv-icon>
								<view class="ml-1">{{user.nickname}}</view>
							</view>
							<view class="font-size-sm text-color-assist">{{formatDateTime(user.flowCheckTime)}}</view>
							<view style="background-color:#f7f8fa;width: 200rpx" class="flex" v-if="user.flowCheckRemark">
								 <view  class="p-2 rounded" style="width: 100%;word-wrap:break-word;word-break: normal; ">
									{{user.flowCheckRemark}}
								</view>
							</view>
						</view>	
					</view>
				</template>
			</uv-steps-item>
		</uv-steps>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { formatDateTime } from '@/utils/util'
const props = defineProps({
	flowAdmins: {type: Array,
					default: function() {
						return []
	}},
})
</script>

<style>

</style>